import React, { Component } from 'react';
import { Link } from 'react-router';
import { inject, observer } from 'mobx-react';
import { Button, Icon, Select } from 'antd'
import { createForm } from 'rc-form';
import Ajax from 'lib/Ajax'
import ListMixin from 'mixin/list'
import EditModule from './editModule'

@inject('appStore')
@observer
class ModuleName extends ListMixin {
  constructor(props) {
    super(props);
    this.state = Object.assign({
      city: '',
      dicType: ''
    }, this.state);
    this.api = {
      list: '/admin/dictionary/list',
      get: '',
      save: '',
      delete: '/admin/dictionary/delete'
    }
    this.itemKey = 'dicId';
    this.columns = [{
      title: '字典类别',
      dataIndex: 'dicType',
      render: text => <span>{this.props.appStore.getNameById('dicTypeEn', text)}</span>
    }, {
      title: '字典code',
      dataIndex: 'dicCode'
    }, {
      title: '字典名称',
      dataIndex: 'dicName'
    }, {
      title: '排序',
      dataIndex: 'rank',
    }, {
      title: '操作',
      dataIndex: 'action',
      render: (text, item) => <span className="action">
        <a href="javascript:;" onClick={()=>{
          this.operate('edit', item[this.itemKey]);
        }}><Icon type="edit"/></a>
        <a href="javascript:;" onClick={()=>{
          this.doDelete(item[this.itemKey]);
        }}><Icon type="delete"/></a>
      </span>
    }];
  }

  renderTitle = () => {
    const self = this;
    const { dicTypeEn } = this.props.appStore.commonData;
    return <div>
      <Button type="primary" style={{marginRight: 15}} icon="plus" onClick={ this.operate.bind(this, 'new') }>新建</Button>
      <div style={{float: 'right'}}>
        <Select 
          size="default" 
          placeholder="请选择分类" 
          allowClear  
          style={{width: 200}}
          value={this.state.dicType} 
          onChange={(value) => {
            self.search = {
              dicType: value
            };
            self.current = 1;
            self.loadData();
        }}>
          {
            (dicTypeEn||[]).map(item=>{
              return <Option key={item.code}>{item.mean}</Option>
            })
          }
        </Select>
      </div>
    </div>
  }

  renderEdit = () => {
    return <EditModule
              visible={ this.state.visible }
              onOk={ this.editOk }
              onCancel={ this.editCancel }
              type={ this.state.editType }
              editId={ this.state.editId }
            />
  }
}


module.exports = ModuleName
